<nav class="navbar navbar-toggler bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"
      ><i class="fa fa-cogs"></i> ${langdata["BLOG_SETTINGS"][lang_name]}</a
    >
  </div>
</nav>
<br />
<div class="row">
  <div class="col-3">
    
    <ul class="list-group" id="blog_settings_list">
      <h6><i class="fa fa-book"></i> 目录 / Contents</h6>
      <li class="list-group-item">
        <a href="#basic_info_theme_config_navhash"
          >${langdata["BASIC_INFO_THEME_CONFIG"][lang_name]}</a
        >
      </li>
      <li class="list-group-item">
        <a href="#announcement_board_navhash">${langdata.SITE_ANNOUNCEMENT_BOARD[lang_name]}</a>
      </li>
      <li class="list-group-item">
        <a href="#favicon_navhash">${langdata["FAVICON"][lang_name]}</a>
      </li>
      <li class="list-group-item">
        <a href="#bgimage_navhash">${langdata["SITE_BGIMAGE"][lang_name]}</a>
      </li>
      <li class="list-group-item">
        <a href="#thirdpartytheme_navhash"
          >${langdata["USE_3RD_THEME"][lang_name]}</a
        >
      </li>
      <li class="list-group-item">
        <a href="#comment_settings_navhash"
          >${langdata["COMMENT_SETTINGS"][lang_name]}</a
        >
      </li>
      <li class="list-group-item">
        <a href="#cdn_settings_navhash"
          >${langdata["CDN_SETTINGS"][lang_name]}</a
        >
      </li>
      <li class="list-group-item">
        <a href="#advanced_navhash">${langdata.HIGH_ADVANCED[lang_name]}</a>
      </li>
    </ul>
  </div>
  <div class="col-9" id="blog_setting_actual_content">
    <div class="fluentinterface" id="basic_info_theme_config_navhash">
      <h2>
        <i class="fa fa-paint-brush"></i>
        ${langdata["BASIC_INFO_THEME_CONFIG"][lang_name]}
      </h2>
      <br />
      <div class="mb-3">
        <label class="form-label"><i class="fa fa-book"></i> ${langdata["BLOG_TITLE"][lang_name]}</label>
        <input
          class="form-control"
          value="${blog['博客标题']}"
          id="blog_settings_title"
        />
      </div>

      <div class="mb-3">
        <label class="form-label"
          ><i class="fa fa-file-text-o"></i> ${langdata["BLOG_DESCRIPTION"][lang_name]}</label
        >
        <input
          class="form-control"
          value="${blog['博客描述（副标题）']}"
          id="blog_settings_description"
        />
      </div>

      <div class="mb-3">
        <label class="form-label"
          ><i class="fa fa-file-text-o"></i> ${langdata["BOTTOM_INFORMATION"][lang_name]}</label
        >
        <textarea class="form-control" id="blog_settings_bottom_information">
${blog["底部信息（格式为markdown）"]}
</textarea
        >
      </div>

      <div class="mb-3">
        <label class="form-label"><i class="fa fa-copyright"></i> ${langdata.WHOLE_SITE_CONTENT_LICENSE[lang_name]}</label>
        <input
          class="form-control"
          value="${blog['全站内容授权协议']}"
          id="blog_settings_content_license"
        />
      </div>

      <div class="alert alert-primary" role="alert">
        ${langdata.WHOLE_SITE_CONTENT_LICENSE_DESCRIPTION[lang_name]}
      </div>

      <div class="form-check form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="blog_content_license_enabled"
        />
        <label class="form-check-label" for="blog_content_license_enabled">
          ${langdata.DISABLE_WHOLE_SITE_CONTENT_LICENSE_FUNCTION[lang_name]}
        </label>
      </div>

      <div class="form-check form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="enable_article_bottom_nav"
        />
        <label class="form-check-label" for="enable_article_bottom_nav">
          ${langdata.DISPLAY_NAVIGATION_BUTTONS[lang_name]}
        </label>
      </div>

      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="enable_article_file_download"
        />
        <label class="form-check-label" for="enable_article_file_download">
          ${langdata.DISPLAY_DOWNLOAD_MARKDOWN_BUTTON[lang_name]}
        </label>
      </div>

      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="enable_copy_full_article_to_clipboard"
        />
        <label class="form-check-label" for="enable_copy_full_article_to_clipboard">
          ${langdata.DISPLAY_COPY_TO_CLIPBOARD_BUTTON[lang_name]}
        </label>
      </div>

      <br />

      <div class="mb-3">
        <label class="form-label"><i class="fa fa-globe"></i> ${langdata["SITE_LANG"][lang_name]}</label>
        <br />
        <select class="form-select">
          <option value="simplified_chinese" id="sitelang_simplified_chinese">
            简体中文
          </option>
          <option value="english" id="sitelang_english">English</option>
        </select>
      </div>

      <div class="mb-3">
        <label class="form-label"
          >${langdata.HOW_MANT_ARTICLE_IN_A_PAGE[lang_name]}</label
        >
        <input
          class="form-control"
          value="${blog['文章列表中每页的文章数为']}"
          type="number"
          min="5"
          id="blog_settings_howmany_article_in_a_page"
        />
        <br />
        <div class="alert alert-primary" role="alert">
          ${langdata.HOW_MANT_ARTICLE_IN_A_PAGE_DESCRIPTION[lang_name]}
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label"
          >${langdata["BLOG_NAVBAR_BGCOLOR"][lang_name]}</label
        >
        <input
          class="form-control"
          value="${blog['全局主题设置']['标题栏背景颜色']}"
          id="blog_settings_titlebar_bgcolor"
        />
      </div>

      <div class="mb-3">
        <label class="form-label"
          >${langdata["BLOG_NAVBAR_TEXTCOLOR"][lang_name]}</label
        >
        <input
          class="form-control"
          value="${blog['全局主题设置']['标题栏文字颜色']}"
          id="blog_settings_titlebar_textcolor"
        />
      </div>

      <div class="alert alert-primary" role="alert">
        <i class="fa fa-smile-o"></i>
        ${langdata["HINT_NAVBAR_COLOR"][lang_name]}
      </div>
      <br />
      <h2>${langdata.DOMAIN_RELATED_FUNCTION[lang_name]}</h2>
      <p>${langdata.DOMAIN_RELATED_FUNCTION_DESCRIPTION[lang_name]}</p>
      
      
      
      <input id="domain_string" class="form-control" placeholder="${langdata.DOMAIN_RELATED_FUNCTION_EXAMPLE[lang_name]}" value="${blog['网站域名（包括https://）']}">
<br />
      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="auto_rss_enabled"
        />
        <label class="form-check-label" for="auto_rss_enabled">
          ${langdata.AUTO_UPDATE_ATOM_XML[lang_name]}
        </label>
      </div>
      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="auto_sitemap_enabled"
        />
        <label class="form-check-label" for="auto_sitemap_enabled">
          ${langdata.AUTO_UPDATE_SITEMAP[lang_name]}
        </label>
      </div>
      <br />

      
      <br />
      <h3>${langdata.CHECK_DATA_CONSISTENCY[lang_name]}</h3>
      <p>
        ${langdata.CHECK_DATA_CONSISTENCY_DESCRIPTION[lang_name]}
      </p>
      <button
        class="fluentbtn fluentbtn-blue"
        onclick="check_data_consistency()"
      >
      ${langdata.CHECK_DATA_CONSISTENCY[lang_name]}
      </button>
    </div>

    <div class="fluentinterface" id="announcement_board_navhash">
      <h3>${langdata.SITE_ANNOUNCEMENT_BOARD[lang_name]}</h3>

      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="website_announcement_enabled"
        />
        <label class="form-check-label" for="website_announcement_enabled">
          ${langdata.ENABLE_ANNOUNCEMENT_BOARD_FUNCTION[lang_name]}
        </label>
      </div>

      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="website_announcement_indexonly"
        />
        <label class="form-check-label" for="website_announcement_indexonly">
          ${langdata.ONLY_DISPLAY_ANNOUNCEMENT_IN_INDEX[lang_name]}
        </label>
      </div>

      <div class="mb-3">
        <label class="form-label"
          >${langdata.CONTENT_OF_ANNOUNCEMENT_BOARD[lang_name]}</label
        >
        <br />
        <textarea class="form-control" id="website_announcement_content">
${blog["网站公告"]}

</textarea
        >
        <br />
      </div>
    </div>

    <div class="fluentinterface" id="favicon_navhash">
      <h2><i class="fa fa-smile-o"></i> ${langdata["FAVICON"][lang_name]}</h2>
      <br />
      <p>${langdata["FAVICON_DESCRIPTION"][0][lang_name]}</p>
      <p>${langdata["FAVICON_DESCRIPTION"][1][lang_name]}</p>
      <p>${langdata["FAVICON_DESCRIPTION"][2][lang_name]}</p>
      <button class="fluentbtn fluentbtn-blue" onclick="select_a_favicon()">
        ${langdata["SELECT_FAVICON"][lang_name]}
      </button>
      <button class="fluentbtn fluentbtn-blue" onclick="view_current_icon()">
        ${langdata["VIEW_FAVICON"][lang_name]}
      </button>
      <button class="fluentbtn" onclick="delete_current_icon()">
        ${langdata["DELETE_FAVICON"][lang_name]}
      </button>
    </div>
    <div class="fluentinterface" id="bgimage_navhash">
      <h2>
        <i class="fa fa-file-image-o"></i>
        ${langdata["SITE_BGIMAGE"][lang_name]}
      </h2>
      <br />

      <select class="form-select" style="display: none">
        <option value="bgimg_use_random_acgnpic">
          使用随机的 ACGN 插画作为网页背景
        </option>
        <option value="bgimg_use_blank">空白背景</option>
        <option value="bgimg_use_url">将某个URL作为网页背景图像</option>
        <option value="bgimg_use_file">选择一个图片文件作为网页背景图像</option>
      </select>

      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="blog_settings_is_using_acg_bg"
        />
        <label class="form-check-label" for="blog_settings_is_using_acg_bg">
          ${langdata["USE_RANDOM_ACG_PIC_AS_BGIMG"][lang_name]}
        </label>
      </div>
    </div>
    <div class="fluentinterface" id="thirdpartytheme_navhash">
      <h2>
        <i class="fa fa-paint-brush"></i>
        ${langdata["USE_3RD_THEME"][lang_name]}
      </h2>
      <br />
      <p id="isUsingThirdPartyTheme"></p>

      

      <button class="fluentbtn" onclick="open_online_theme_dialog()">
        <i class="fa fa-external-link"></i> ${langdata["OPEN_THEME_STORE"][lang_name]}
      </button>

      <br /><br />

      <button class="btn btn-link" onclick="reset_official_theme();">
        ${langdata["RESET_TO_OFFICIAL_THEME"][lang_name]}
      </button>
      <button class="btn btn-link" onclick="apply_thirdparty_theme_v2();">
        ${langdata["USE_3RD_THEME_FROM_FILE_V2"][lang_name]}
      </button>
    </div>

    <div class="fluentinterface" id="comment_settings_navhash">
      <h2>
        <i class="fa fa-comments-o"></i>
        ${langdata["COMMENT_SETTINGS"][lang_name]}
      </h2>
      <br />

      <div id="hint_of_use_public_comment_service">
        ${langdata["COMMENT_SETTINGS_SIMPLE_DESCRIPTION"][lang_name]}
        <br /><br />
        <li>
          ${langdata["COMMENT_SETTINGS_WAY1_PART1"][lang_name]}<a
            href="javascript:void(0)"
            onclick="use_public_comment_service_offered_by_bbg();"
          >
            ${langdata["COMMENT_SETTINGS_WAY1_PART2"][lang_name]}</a
          >${langdata["COMMENT_SETTINGS_WAY1_PART3"][lang_name]}
        </li>
        <br />
        <li>${langdata["COMMENT_SETTINGS_WAY2"][lang_name]}</li>
        <br />
      </div>

      <div id="leancloud_settings_detail">
        <p>${langdata["COMMENT_SETTINGS_FORM_HINT"][lang_name]}</p>

        <div class="form-check  form-switch">
          <input
            class="form-check-input"
            type="checkbox"
            id="blog_settings_is_valine_enabled"
          />
          <label class="form-check-label" for="blog_settings_is_valine_enabled">
            ${langdata["ENABLE_VALINE"][lang_name]}
          </label>
        </div>
        <br />
        <div class="mb-3">
          <label class="form-label"
            >${langdata["VALINE_APPID"][lang_name]}</label
          >
          <input
            class="form-control"
            value="${blog['全局评论设置']['valine设置']['leancloud_appid']}"
            id="blog_settings_valine_appid"
          />
        </div>

        <div class="mb-3">
          <label class="form-label"
            >${langdata["VALINE_APPKEY"][lang_name]}</label
          >
          <input
            class="form-control"
            value="${blog['全局评论设置']['valine设置']['leancloud_appkey']}"
            id="blog_settings_valine_appkey"
          />
        </div>
      </div>
    </div>

    <div class="fluentinterface" id="cdn_settings_navhash">
      <h2><i class="fa fa-bolt"></i> ${langdata["CDN_SETTINGS"][lang_name]}</h2>
      <br />
      <div id="cdn_settings_desc">
        ${langdata["CDN_SETTINGS_SIMPLE_DESCRIPTION"][lang_name]}
      </div>
      <div class="mb-3">
        <br />
        <label class="form-label">
          ${langdata["CDN_SETTINGS_METHOD"][lang_name]}
        </label>
        <br />
        <input
          type="radio"
          id="cdn_cho_1"
          name="cdn_choose"
        />&nbsp;&nbsp;${langdata["CDN_SETTINGS_LIST"][lang_name]}<br />
        <input
          type="radio"
          id="cdn_cho_2"
          name="cdn_choose"
        />&nbsp;&nbsp;${langdata["CDN_SETTINGS_MANUAL"][lang_name]}
        <div id="cdn_cho" style="display: none">
          <select
            name="cdn_path"
            class="form-control"
            id="blog_setting_cdn_frm_1"
          >
            <option value="https://unpkg.com">
              ${langdata["CDN_SETTINGS_OFFICAL"][lang_name]}
            </option>
            <option value="https://cdn.jsdelivr.net/npm" selected>
              ${langdata["CDN_SETTINGS_JSD"][lang_name]}
            </option>
            <option value="https://unpkg.zhimg.com">
              ${langdata["CDN_SETTINGS_ZHIMG"][lang_name]}
            </option>
            <option value="https://unpkg.chicdn.cn">
              ${langdata["CDN_SETTINGS_CHICDN"][lang_name]}
            </option>
          </select>
        </div>
        <div id="cdn_manual" style="display: none">
          <br />
          <label class="form-label" for="cdn_path">
            ${langdata["CDN_SETTINGS_MANUAL_SET"][lang_name]} </label
          ><br />
          <input
            name="cdn_path"
            class="form-control"
            type="text"
            id="blog_setting_cdn_frm_2"
          />
        </div>
      </div>
    </div>

    <div class="fluentinterface" id="advanced_navhash">
      <h3>${langdata.HIGH_ADVANCED[lang_name]}</h3>
      <p>${langdata.HIGH_ADVANCED_DESCRIPTION[lang_name]}</p>
      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="blog_settings_enable_custom_css"
        />
        <label class="form-check-label" for="blog_settings_enable_custom_css">
          ${langdata.ENABLE_CUSTOMIZE_CSS[lang_name]}
        </label>
      </div>

      <p>
        ${langdata.ENABLE_CUSTOMIZE_CSS_DESCRIPTION[lang_name]}
      </p>

      <div class="form-check  form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="blog_settings_enable_custom_js"
        />
        <label class="form-check-label" for="blog_settings_enable_custom_js">
          ${langdata.ENABLE_CUSTOMIZE_JS[lang_name]}
        </label>
      </div>

      <p>
        ${langdata.ENABLE_CUSTOMIZE_JS_DESCRIPTION[lang_name]}
      </p>

      <div class="mb-3">
        <label class="form-label">${langdata.CUSTOM_CSS_CODE[lang_name]}</label>
        <br />
        <textarea class="form-control" id="blog_settings_custom_css">
${blog["自定义CSS"]}

</textarea
        >
        <br />
      </div>

      <div class="mb-3">
        <label class="form-label">${langdata.CUSTOM_JS_CODE[lang_name]}</label>
        <br />
        <textarea class="form-control" id="blog_settings_custom_js">
${blog["自定义JS"]}

</textarea
        >
        <br />
      </div>
    </div>
    <div
      class="fluentinterface"
      style="
        position: fixed;
        bottom: 4px;
        width: 60%;
        box-shadow: 4px 3px 1px -2px rgb(0 0 0 / 20%),
          0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
      "
    >    
      <button
        class="fluentbtn"
        onclick="document.documentElement.scrollTop = 0;"
      >
        <i class="fa fa-arrow-up"></i> ${langdata.BACK_TO_UP[lang_name]}
      </button>
      <button class="fluentbtn fluentbtn-blue" onclick="save_blog_settings();">
        <i class="fa fa-check"></i> ${langdata.SAVE_CONFIGURATION[lang_name]}
      </button>
      <button class="fluentbtn" onclick="window.location.reload()">
        <i class="fa fa-ban"></i> ${langdata.CANCEL_THIS_TIME_CONFIGURATION[lang_name]}
      </button>
    </div>
  </div>
</div>

<br />
